<template>
  <div style="padding: 20px">
    <el-button type="primary" @click="cancel">返回</el-button>
    <el-input v-model="selectname" placeholder="请输入模板名" style="margin-left: 400px; width: 200px;margin-right:10px" />
    <el-button type="primary" icon="el-icon-search" style="margin:10px 0px" @click="select">搜索</el-button>
    <el-button type="primary" icon="el-icon-plus" style="margin:10px 0px;float: right" @click="addOrderList">添加</el-button>
    <el-table style="width: 100%" border :data="list">
      <!--    表格组件
              data：表格组件展示的数据，数组类型
              border：边框
              column属性
              label：显示的标题
              width：对应列的宽度
              align：标题对齐方式
      -->
      <!--    eleme-ui以一列为单位展示数据
              prop: 对应列内容字段名
      -->
      <el-table-column type="index" prop="prop" label="序号" width="80px" align="center" />
      <el-table-column prop="name" label="模板名" width="width" />
      <el-table-column prop="description" label="描述" width="width" />
      <el-table-column prop="company_id" label="所属公司编号" width="width" />
      <el-table-column prop="prop" label="操作" width="width">
<!--        <template slot-scope="{row,$index}">-->
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="selectOp(row)">查询</el-button>-->
<!--          <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateOp(row)">修改</el-button>-->
<!--          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteOp(row)">删除</el-button>-->
<!--        </template>-->
      </el-table-column>
    </el-table>
    <!--  分页器
    当前第几页，数据总条数,每一页显示条数，连续页码数
    current-page：当前第几页
    total：总条数
    page-size：每页展示数据
    page-sizes：可以设置每页展示多少条数据
    layout：布局
    page-count:按钮数量 if为n 连续页码为n-2
    -->
    <el-pagination
      style="margin-top: 20px; text-align: center"
      :current-page.sync="page"
      :page-count="7"
      :page-sizes="[3,5,10]"
      :page-size.sync="limit"
      layout=" prev, pager, next, jumper,->,total,sizes"
      @current-change="pageChange(page)"
      @size-change="limitChange(limit)"
    />
    <el-dialog title="操作命令详情" :visible.sync="dialogTableVisible">
      <el-table :data="opList">
        <el-table-column type="index" prop="prop" label="序号" width="50" />
        <el-table-column property="id" label="id" width="50" />
        <el-table-column property="URL" label="URL" width="150" />
        <el-table-column property="description" label="描述" width="200" />
        <el-table-column property="company_id" label="公司编号" />
      </el-table>
    </el-dialog>
    <!--修改的时候弹出来的表单-->
    <div>
      <el-dialog title="修改命令" :visible.sync="dialogFormVisible">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in checkList" :key="city.id" :label="city.id">{{ city.URL }}{{ city.description }}</el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateOrder(row)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <!--添加命令模板的表单-->
      <el-dialog title="添加命令模板" :visible.sync="dialogFlagVisible">
        <!--表单-->
        <el-form>
          <el-form-item label="全部可供选择的命令" label-width="150px" />
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="margin: 10px 20px" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;" />
          <el-checkbox-group v-model="checkedCities" style="margin: 0px 20px" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in checkList" :key="city.id" :label="city.id">{{ city.URL }}{{ city.description }}</el-checkbox>
          </el-checkbox-group>
        </el-form>
        <el-form ref="ruleForm" style="width:80%;margin: 10px 20px" :model="addOrder" :rules="rulesOne">
          <el-form-item label="命令模板名称" label-width="110px" prop="name" style="margin: 20px 0px">
            <el-input v-model="addOrder.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="命令模板描述" label-width="110px" prop="description">
            <el-input v-model="addOrder.description" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFlagVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateOrderTwo(row)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
export default {
  name: 'Index',
  data() {
    return {
      // 下面是复选框
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true,
      checkList: [],
      // 下面是正常内容
      list: [],
      limit: 3,
      page: 1,
      oppage: 1,
      oplimit: 3,
      selectname: '',
      dialogTableVisible: false,
      // 添加表格弹窗的flag
      dialogFlagVisible: false,
      opList: [],
      comId: '',
      // 收集添加命令模板的数据
      addOrder: {
        URLS: [],
        name: '',
        description: '',
        company_id: ''
      },
      // 下面的是用来收集命令的
      order: {
        id: '',
        URL: '',
        description: '',
        company_id: ''
      },
      // 对话框显示与隐藏的控制,默认是隐藏
      dialogFormVisible: false,
      // 表单验证的规则，是一个对象
      rules: {
        // 公司名称验证规则
        // required是必须要校验的字段，和前面的五角星有关， message是提示的信息，trigger是用户行为的设置（比如说用户行为发生变化的时候会触发）
        name: [
          { required: true, message: '请输入URL', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change' }
        ],
        // 公司地址验证规则
        location: [
          { required: true, message: '请输入命令描述', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
        ],
        // 公司电话验证规则
        phone: [
          { required: true, message: '请输入公司编号', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change' }
        ]
      },
      // 添加按钮的表单验证
      rulesOne: {
        name: [
          { required: true, message: '请输入命令模板名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入命令模板描述', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // this.getAllList()
  },
  methods: {
    pageChange(page) {
      this.oppage = page
      this.getAllList()
    },
    limitChange(limit) {
      this.oplimit = limit
      this.getAllList()
    },
    select() {
      if (this.selectname === '') {
        alert('所要查询的模板名称为空')
      } else {
        this.$axios.get(this.PlatformBaseURL + '/device/template/query',
          {
            headers: {
              satoken: window.localStorage.getItem('token')
            },
            params: {
              pagesize: this.limit,
              current: 1,
              template_name: this.selectname
            }
          }
        ).then((res) => {
          // console.log(res)
          this.list = res.data
        })
      }
    },
    // 修改命令
    updateOp(row) {
      // 获取当前可以获得到的全部操作命令
      this.$axios.get(this.PlatformBaseURL + '/device/command/getall', {
        headers: {
          satoken: window.localStorage.getItem('token')
        },
        params: {
          pagesize: this.limit,
          current: 1
        }
      }).then((res) => {
        // alert(111)
        // console.log(res)
        // this.opList = res.data
        this.checkList = res.data
      })
      // console.log(row)
      //  显示对话框
      this.dialogFormVisible = true
      // 将已有的公司的信息赋值给companyForm进行展示
      // companyForm储存的是服务器返回的以及收集到的公司信息数据
      // 浅拷贝让companyForm接收到的并非是服务器返回的数据
      this.order = { ...row }
    },
    // 发送修改请求的接口（确定按钮的函数调用）
    updateOrder(row) {
      this.dialogFormVisible = false
      this.$axios.post(this.PlatformBaseURL + '/device/template/update', {
        // eslint-disable-next-line no-undef
        template_id: this.order.id,
        URLS: this.checkedCities
      }, {
        headers: {
          satoken: window.localStorage.getItem('token')
        }
      }).then((res) => {
        // console.log(res)
        if (res.code === 200) {
          this.list = res.data
          this.$message({
            message: '修改本操作命令模板对应的操作命令成功',
            type: 'success'
          })
          this.getAllList()
        }
      })
    },
    // 返回设备页面
    cancel() {
      this.$emit('changeScene', 1)
      Object.assign(this._data, this.$options.data())
    },
    // 获取模板列表
    getAllList() {
      console.log(this.oppage)
      this.$axios.get(this.PlatformBaseURL + '/device/template/getall', {
        headers: {
          satoken: window.localStorage.getItem('token')
        },
        params: {
          pagesize: this.oplimit,
          current: this.oppage
        }
      }).then((res) => {
        // console.log(res)
        this.list = res.data
        this.comId = res.data[0].company_id
      })
    },
    // 查看模板命令
    selectOp(row) {
      this.dialogTableVisible = true
      // console.log(row.id)
      this.$axios.get(this.PlatformBaseURL + '/device/template/getone', {
        headers: {
          satoken: window.localStorage.getItem('token')
        },
        params: {
          pagesize: this.limit,
          current: 1,
          template_id: row.id
        }
      }).then((res) => {
        // console.log(res)
        this.opList = res.data
        // this.checkList = res.data
      })
    },
    // 删除模板
    deleteOp(row) {
      this.$axios.post(this.PlatformBaseURL + '/device/template/delete', {
        template_id: row.id
      }, {
        headers: {
          satoken: window.localStorage.getItem('token')
        }
      }).then((res) => {
        // console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getAllList()
        } else {
          alert('删除失败!')
        }
      })
    },
    // 添加按钮的回调
    addOrderList() {
      this.dialogFlagVisible = true
      // 获取当前可以获得到的全部操作命令
      this.$axios.get(this.PlatformBaseURL + '/device/command/getall', {
        headers: {
          satoken: window.localStorage.getItem('token')
        },
        params: {
          pagesize: this.limit,
          current: 1
        }
      }).then((res) => {
        // alert(111)
        // console.log(res)
        // this.opList = res.data
        this.checkList = res.data
      })
    },
    // 添加命令模板的表单的确定按钮
    updateOrderTwo(row) {
      this.dialogFlagVisible = false
      // 获取当前可以获得到的全部操作命令
      this.$axios.post(this.PlatformBaseURL + '/device/template/add', {
        URLS: this.checkedCities,
        name: this.addOrder.name,
        description: this.addOrder.description,
        company_id: this.comId
      }, {
        headers: {
          satoken: window.localStorage.getItem('token')
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '添加命令模板成功',
            type: 'success'
          })
          this.getAllList()
        }
      })
    },
    // 下面的是多选框的自定义函数
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.checkList : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.checkList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length
    }
  }
}
</script>

<style scoped>

</style>
